<template>
  <div class="container" :class="{ 'form-mode': isFormMode }">
    <!-- 顶部卡片 - 在非表单模式下显示 -->
    <div v-if="!isFormMode && !showSuccess && !showError" class="top-card">
      <div class="back-btn" @click="goBack">
        <i class="fas fa-arrow-left"></i>
      </div>
      <h1 class="top-card-title">
        <i class="fas fa-hands-helping"></i>员工心理咨询转介
        <p class="top-card-description">专业、保密、高效的心理健康支持通道</p>
      </h1>
      <div class=""></div>
    </div>

    <!-- 主卡片 - 在非表单模式下显示 -->
    <div v-if="!isFormMode && !showSuccess && !showError" class="main-card">
      <!-- 卡片头部 -->
      <div class="card-header">
        <h2 class="card-header-title">
          <div class="card-header-icon">
            <i class="fas fa-user-shield"></i>
          </div>
          保密原则确认
        </h2>
      </div>

      <!-- 卡片内容 -->
      <div class="card-content">
        <!-- 保密协议 -->
        <div class="confidentiality-agreement">
          <h3 class="agreement-title">
            <i class="fas fa-exclamation-triangle"></i>重要保密原则声明
          </h3>
          <div class="agreement-content">
            <p>
              心理咨询服务严格遵守保密原则，所有员工咨询内容将被严格保密。作为管理者，在转介员工前请确保您已充分理解并遵守以下保密原则：
            </p>
            <p>
              1.
              心理咨询的核心原则是保密性，只有在特殊情况下（如危及自身或他人安全）才会打破保密原则。
            </p>
            <p>
              2.
              作为转介方，您不会收到员工咨询的具体内容，除非员工本人授权咨询师与您分享特定信息。
            </p>
            <p>
              3.
              咨询师将根据专业伦理要求，仅向您反馈员工是否参与咨询的进展情况（如参与次数、是否完成咨询等）。
            </p>
            <p>4. 您作为转介者的身份将被严格保密，除非您授权告知员工。</p>
          </div>

          <!-- 优化后的操作区域 -->
          <div class="action-container">
            <div class="checkbox-container">
              <input
                type="checkbox"
                id="agreeCheckbox"
                v-model="agreementChecked"
                class="checkbox-input"
              />
              <label for="agreeCheckbox" class="checkbox-label">
                我已阅读并同意上述保密原则，员工了解并同意本次转介行为。我理解作为管理者，在转介过程中尊重员工的自主权和隐私权是至关重要的并确认转介。
              </label>
            </div>

            <button
              class="submit-agreement-btn"
              :disabled="!agreementChecked"
              @click="showReferralForm"
            >
              <i class="fas fa-paper-plane"></i>
              确认并进入转介
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 表单模式下的头部 -->
    <div v-if="isFormMode && !showSuccess && !showError" class="form-header">
      <button class="back-button" @click="backToMain">
        <i class="fas fa-arrow-left"></i>
      </button>
      <h1 class="form-header-title">员工转介信息填写</h1>
      <div class="form-header-title"><i class="fas fa-user-friends"></i></div>
    </div>

    <!-- 转介表单 - 始终显示但在表单模式下全屏显示 -->
    <div
      v-if="isFormMode && !showSuccess && !showError"
      class="referral-form-container"
    >
      <div class="referral-form">
        <div class="form-content">
          <!-- 修改后的表单内容，按照要求的字段顺序 -->
          <div class="form-grid">
            <!-- 管理人员姓名 -->
            <div class="form-field">
              <label class="field-label"
                >管理人员姓名 <span class="required">*</span></label
              >
              <input
                type="text"
                placeholder="请输入您的姓名"
                v-model="formData.managerName"
                class="field-input"
                :class="{ error: fieldErrors.managerName }"
                required
                @blur="validateField('managerName')"
              />
              <span v-if="fieldErrors.managerName" class="error-message">{{
                fieldErrors.managerName
              }}</span>
            </div>

            <!-- 客户公司 -->
            <div class="form-field">
              <label class="field-label"
                >客户公司 <span class="required">*</span></label
              >
              <input
                type="text"
                placeholder="请输入公司名称"
                v-model="formData.company"
                class="field-input"
                :class="{ error: fieldErrors.company }"
                required
                @blur="validateField('company')"
              />
              <span v-if="fieldErrors.company" class="error-message">{{
                fieldErrors.company
              }}</span>
            </div>

            <!-- 管理人员联系方式 -->
            <div class="form-field">
              <label class="field-label"
                >管理人员联系方式 <span class="required">*</span></label
              >
              <input
                type="tel"
                placeholder="请输入您的手机号"
                v-model="formData.managerPhone"
                class="field-input"
                :class="{ error: fieldErrors.managerPhone }"
                required
                @blur="validateField('managerPhone')"
              />
              <span v-if="fieldErrors.managerPhone" class="error-message">{{
                fieldErrors.managerPhone
              }}</span>
            </div>

            <!-- 情况说明 -->
            <div class="form-field full-width">
              <label class="field-label"
                >情况说明 <span class="required">*</span></label
              >
              <textarea
                placeholder="请简要说明转介原因（如观察到的工作表现变化、行为异常等）"
                v-model="formData.description"
                class="field-textarea"
                :class="{ error: fieldErrors.description }"
                required
                @blur="validateField('description')"
              ></textarea>
              <span v-if="fieldErrors.description" class="error-message">{{
                fieldErrors.description
              }}</span>
            </div>

            <!-- 员工姓名 -->
            <div class="form-field">
              <label class="field-label"
                >员工姓名 <span class="required">*</span></label
              >
              <input
                type="text"
                placeholder="请输入员工姓名"
                v-model="formData.employeeName"
                class="field-input"
                :class="{ error: fieldErrors.employeeName }"
                required
                @blur="validateField('employeeName')"
              />
              <span v-if="fieldErrors.employeeName" class="error-message">{{
                fieldErrors.employeeName
              }}</span>
            </div>

            <!-- 员工联系方式（非必填） -->
            <div class="form-field">
              <label class="field-label">员工联系方式</label>
              <input
                type="tel"
                placeholder="请输入员工手机号（选填）"
                v-model="formData.employeePhone"
                class="field-input"
                :class="{ error: fieldErrors.employeePhone }"
                @blur="validateField('employeePhone')"
              />
              <span v-if="fieldErrors.employeePhone" class="error-message">{{
                fieldErrors.employeePhone
              }}</span>
            </div>
          </div>

          <div class="info-box">
            <p class="info-text">
              <i class="fas fa-info-circle"></i>
              温馨提醒：基于保密原则，我们将根据您的转介服务性质提供不同层次的反馈。如员工同意分享信息，我们会反馈咨询参与情况；如员工未授权，我们仅告知咨询是否已建立。
            </p>
          </div>

          <div class="submit-button-container">
            <button
              class="submit-button"
              :disabled="isSubmitting"
              @click="submitForm"
            >
              <i
                class="fas"
                :class="isSubmitting ? 'fa-spinner fa-spin' : 'fa-check-circle'"
              ></i>
              {{ isSubmitting ? "提交中..." : "提交转介申请" }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 右下角查看引导按钮 -->
    <div
      v-if="!isFormMode && !showSuccess && !showError"
      class="floating-guide-button"
      @click="showGuideImage"
    >
      <i class="fas fa-book-open"></i>
      <span class="button-text">查看引导</span>
    </div>

    <!-- 沟通指南图片弹窗 -->
    <div v-if="showImage" class="image-modal" @click="hideGuideImage">
      <div class="image-modal-content" @click.stop>
        <div class="image-modal-header">
          <h3>沟通指南</h3>
          <button class="close-button" @click="hideGuideImage">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="image-container">
          <img
            :src="guideImageUrl"
            alt="沟通指南"
            class="guide-image"
            @load="onImageLoad"
            @error="onImageError"
          />
          <div v-if="imageLoading" class="image-loading">
            <i class="fas fa-spinner fa-spin"></i>
            <span>图片加载中...</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 提交成功页面 -->
    <div v-if="showSuccess" class="result-container">
      <div class="result-content success">
        <div class="result-icon">
          <i class="fas fa-check-circle"></i>
        </div>
        <h2 class="result-title">转介申请提交成功！</h2>
        <p class="result-message">
          我们已收到您的转介申请，专业心理咨询师将尽快与员工联系。
        </p>
        <div class="result-actions">
          <button class="result-button primary" @click="goBack2">
            返回首页
          </button>
          <!-- <button class="result-button secondary" @click="submitAnother">
            继续转介
          </button> -->
        </div>
      </div>
    </div>

    <!-- 提交失败页面 -->
    <div v-if="showError" class="result-container">
      <div class="result-content error">
        <div class="result-icon">
          <i class="fas fa-exclamation-circle"></i>
        </div>
        <h2 class="result-title">提交失败</h2>
        <p class="result-message">抱歉，提交过程中出现错误，请稍后重试。</p>
        <div class="result-actions">
          <button class="result-button primary" @click="retrySubmit">
            重新提交
          </button>
          <button class="result-button secondary" @click="goBack">
            返回上一页
          </button>
        </div>
      </div>
    </div>

    <!-- Toast 通知 -->
    <div v-if="showToast" class="toast" :class="toastType">
      <i class="fas" :class="toastIcon"></i>
      <span class="toast-message">{{ toastMessage }}</span>
    </div>
  </div>
</template>

<script>
import { saveReferral } from "../../api/manager";

export default {
  name: "EmployeeReferral",
  data() {
    return {
      agreementChecked: false, // 重新添加勾选框状态
      isFormMode: false,
      isSubmitting: false,
      showSuccess: false,
      showError: false,
      showToast: false,
      toastMessage: "",
      toastType: "info", // info, success, error
      showImage: false,
      imageLoading: false,
      guideImageUrl: "https://lesson.iapeap.com/%E5%9B%BE%E7%89%871.png",
      formData: {
        managerName: "",
        company: "",
        managerPhone: "",
        description: "",
        employeeName: "",
        employeePhone: "",
      },
      fieldErrors: {
        managerName: "",
        company: "",
        managerPhone: "",
        description: "",
        employeeName: "",
        employeePhone: "",
      },
    };
  },
  computed: {
    toastIcon() {
      switch (this.toastType) {
        case "success":
          return "fa-check-circle";
        case "error":
          return "fa-exclamation-circle";
        default:
          return "fa-info-circle";
      }
    },
  },
  methods: {
    showReferralForm() {
      this.isFormMode = true;
      window.scrollTo({ top: 0, behavior: "smooth" });
    },
    backToMain() {
      this.isFormMode = false;
      this.resetForm();
    },
    showGuideImage() {
      this.showImage = true;
      this.imageLoading = true;
      document.body.style.overflow = "hidden"; // 防止背景滚动
    },
    hideGuideImage() {
      this.showImage = false;
      document.body.style.overflow = ""; // 恢复滚动
    },
    onImageLoad() {
      this.imageLoading = false;
    },
    onImageError() {
      this.imageLoading = false;
      this.showToastMessage("图片加载失败，请稍后重试", "error");
      this.hideGuideImage();
    },
    getCurrentDate() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    validateField(fieldName) {
      const value = this.formData[fieldName];
      this.fieldErrors[fieldName] = "";

      // 员工联系方式为非必填，其他字段为必填
      if (fieldName !== "employeePhone" && (!value || value.trim() === "")) {
        this.fieldErrors[fieldName] = "此字段为必填项";
        return false;
      }

      // 特殊验证规则
      if (fieldName.includes("Phone") && value) {
        const phoneRegex = /^1[3-9]\d{9}$/;
        if (!phoneRegex.test(value)) {
          this.fieldErrors[fieldName] = "请输入有效的手机号码";
          return false;
        }
      }

      return true;
    },
    validateForm() {
      let isValid = true;
      const requiredFields = [
        "managerName",
        "company",
        "managerPhone",
        "description",
        "employeeName",
      ];

      requiredFields.forEach((field) => {
        if (!this.validateField(field)) {
          isValid = false;
        }
      });

      // 单独验证员工联系方式（非必填，但有值时需要验证格式）
      if (this.formData.employeePhone && !this.validateField("employeePhone")) {
        isValid = false;
      }

      return isValid;
    },
    showToastMessage(message, type = "info") {
      this.toastMessage = message;
      this.toastType = type;
      this.showToast = true;

      setTimeout(() => {
        this.showToast = false;
      }, 3000);
    },
    submitForm() {
      if (!this.validateForm()) {
        this.showToastMessage("请检查表单中的错误", "error");
        return;
      }

      this.isSubmitting = true;

      // 准备提交数据 - 根据新的字段结构调整
      const submitData = {
        unitName: this.formData.company,
        createTime: this.getCurrentDate(),
        createUser: localStorage.getItem("userId"), // 可能需要从store中获取当前用户ID
        deal: this.formData.description,
        glName: this.formData.managerName,
        glPhone: this.formData.managerPhone,
        id: localStorage.getItem("userId"),
        isChat: this.formData.discussed,
        message: this.formData.description, // 可选字段
        zkName: this.formData.employeeName,
        zkPhone: this.formData.employeePhone || "", // 非必填字段，为空时传空字符串
        // 注意：移除了glMember和zkMember字段
      };

      saveReferral(submitData)
        .then((res) => {
          if (res.code === 200) {
            this.isSubmitting = false;
            this.showSuccess = true;
            this.isFormMode = false;
          }
        })
        .catch((error) => {
          this.isSubmitting = false;
          this.showError = true;
          this.isFormMode = false;
          console.error("提交错误:", error);
        });
    },
    resetForm() {
      this.agreementChecked = false;
      this.isFormMode = false;
      this.showSuccess = false;
      this.showError = false;
      this.formData = {
        managerName: "",
        company: "",
        managerPhone: "",
        description: "",
        employeeName: "",
        employeePhone: "",
        discussed: "",
      };
      // 清空错误信息
      Object.keys(this.fieldErrors).forEach((key) => {
        this.fieldErrors[key] = "";
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    goBack2() {
      this.$router.push("/managerHome");
    },
    submitAnother() {
      this.resetForm();
    },
    retrySubmit() {
      this.showError = false;
      this.isFormMode = true;
    },
  },
};
</script>

<style scoped>
.error {
  border-color: #ff4757 !important;
}

.error-message {
  color: #ff4757;
  font-size: 12px;
  margin-top: 5px;
  display: block;
}

.result-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: 20px;
}

.result-content {
  text-align: center;
  max-width: 500px;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.result-content.success {
  background-color: #f8fff9;
  border: 1px solid #2ed573;
}

.result-content.error {
  background-color: #fff5f5;
  border: 1px solid #ff4757;
}

.result-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.result-content.success .result-icon {
  color: #2ed573;
}

.result-content.error .result-icon {
  color: #ff4757;
}

.result-title {
  font-size: 24px;
  margin-bottom: 15px;
  color: #2f3542;
}

.result-message {
  color: #747d8c;
  margin-bottom: 30px;
  line-height: 1.6;
}

.result-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.result-button {
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
}

.result-button.primary {
  background-color: #3742fa;
  color: white;
}

.result-button.secondary {
  background-color: #f1f2f6;
  color: #2f3542;
}

.result-button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 20px;
  border-radius: 5px;
  color: white;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1000;
  animation: slideIn 0.3s, fadeOut 0.5s 2.5s forwards;
}

.toast.info {
  background-color: #3742fa;
}

.toast.success {
  background-color: #2ed573;
}

.toast.error {
  background-color: #ff4757;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* 基础样式 */
.container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Helvetica Neue", Arial, sans-serif;
  transition: all 0.3s ease;
}

/* 表单模式下的容器样式 */
.container.form-mode {
  padding: 0;
  background: linear-gradient(135deg, #f8fbff 0%, #edf4ff 100%);
  justify-content: flex-start;
}

/* 顶部卡片样式 */
.top-card {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  box-sizing: border-box;
  text-align: center;
  color: white;
  box-shadow: 0 20px 40px rgba(79, 70, 229, 0.15);
  position: relative;
  overflow: hidden;
  width: 100%;
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px 0 10px;
  margin-bottom: 20px;
}

.top-card-circle {
  position: absolute;
  top: -60px;
  right: -40px;
  width: 140px;
  height: 140px;
  background: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 100%
  );
  border-radius: 50%;
}

.top-card-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  position: relative;
  gap: 8px;
}

.top-card-title i {
  font-size: 18px;
}

.top-card-description {
  font-size: 14px;
  opacity: 0.9;
  line-height: 1.5;
  margin: 0;
}

/* 主卡片样式 */
.main-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-bottom: 24px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  max-width: 480px;
  width: 100%;
}

.card-header {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  padding: 20px 24px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.card-header-title {
  font-size: 18px;
  font-weight: 600;
  color: #1e40af;
  display: flex;
  align-items: center;
  margin: 0;
}

.card-header-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 12px;
  font-size: 16px;
}

/* 保密协议样式 */
.confidentiality-agreement {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-radius: 16px;
  padding: 20px;
  margin: 20px;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.1);
}

.agreement-title {
  font-size: 16px;
  font-weight: 600;
  color: #92400e;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.agreement-content {
  color: #374151;
  margin-bottom: 20px;
}

.agreement-content p {
  line-height: 1.6;
  margin-bottom: 12px;
  font-size: 14px;
}

/* 优化后的操作区域样式 */
.action-container {
  margin-top: 24px;
}

.checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}

.checkbox-input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: #4f46e5;
  flex-shrink: 0;
}

.checkbox-label {
  font-size: 14px;
  line-height: 1.5;
  color: #374151;
  cursor: pointer;
}

.submit-agreement-btn {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.submit-agreement-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
}

.submit-agreement-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 右下角浮动引导按钮 */
.floating-guide-button {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  z-index: 100;
}

.floating-guide-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

.floating-guide-button:active {
  transform: translateY(0);
}

/* 表单头部样式 */
.form-header {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  padding: 10px 1.5rem 10px 0.8rem;
  box-sizing: border-box;
}

.back-button {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.back-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.form-header-title {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 表单容器样式 */
.referral-form-container {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.referral-form {
  flex: 1;
  padding: 20px;
  background: transparent;
}

.form-content {
  max-width: 400px;
  margin: 0 auto;
  width: 100%;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.form-field {
  display: flex;
  flex-direction: column;
}

.form-field.full-width {
  grid-column: 1 / -1;
}

.field-label {
  display: block;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
  font-size: 14px;
}

.required {
  color: #ef4444;
}

.field-input,
.field-textarea {
  padding: 14px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  outline: none;
  transition: all 0.3s ease;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.9);
}

.field-input:focus,
.field-textarea:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
  background: white;
}

.field-textarea {
  min-height: 100px;
  resize: vertical;
  font-family: inherit;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

.radio-input {
  width: 18px;
  height: 18px;
  accent-color: #4f46e5;
}

.radio-option label {
  font-size: 14px;
  color: #4b5563;
}

/* 信息框样式 */
.info-box {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 12px;
  padding: 16px;
  margin: 24px 0;
  border-left: 4px solid #3b82f6;
}

.info-text {
  color: #374151;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.info-text i {
  color: #3b82f6;
  margin-top: 2px;
  flex-shrink: 0;
}

/* 提交按钮样式 */
.submit-button-container {
  margin-top: 8px;
}

.submit-button {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  padding: 16px 32px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  width: 100%;
  gap: 8px;
}

.submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.4);
}

/* 图片弹窗样式 */
.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;
  box-sizing: border-box;
}

.image-modal-content {
  background: white;
  border-radius: 12px;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.image-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}

.image-modal-header h3 {
  margin: 0;
  color: #374151;
  font-size: 18px;
  font-weight: 600;
}

.close-button {
  background: none;
  border: none;
  font-size: 20px;
  color: #6b7280;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.close-button:hover {
  background: #e5e7eb;
  color: #374151;
}

.image-container {
  flex: 1;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  min-height: 400px;
}

.guide-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.image-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #6b7280;
  padding: 40px;
}

.image-loading i {
  font-size: 24px;
}

/* 响应式设计 */
@media (min-width: 768px) {
  .container:not(.form-mode) {
    padding: 40px 20px;
    justify-content: center;
  }

  .top-card,
  .main-card {
    max-width: 480px;
  }

  .form-content {
    max-width: 440px;
  }

  .form-grid {
    gap: 20px;
  }

  .radio-group {
    flex-direction: row;
    gap: 24px;
  }
}

/* 小屏幕优化 */
@media (max-width: 480px) {
  .confidentiality-agreement {
    margin: 16px;
    padding: 16px;
  }

  .checkbox-label {
    font-size: 13px;
  }

  .floating-guide-button {
    bottom: 16px;
    right: 16px;
    padding: 10px 16px;
    font-size: 13px;
  }

  .image-modal {
    padding: 10px;
  }

  .image-container {
    padding: 15px;
  }
}

/* 动画效果 */
.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 防止页面滚动 */
body.form-mode-open {
  overflow: hidden;
}
.back-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #eef0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5b67ff;
  cursor: pointer;
}
</style>
